<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="../script/jquery.nailthumb.1.1.js"></script>
<script type="text/javascript" src="../script/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="../royalslider/jquery.royalslider.min.js"></script>
<link href="../royalslider/royalslider.css" rel="stylesheet">
<link href="../royalslider/rs-default.css" rel="stylesheet">

<script>
$(document).ready(function(){
	 $('#content-slider-1').royalSlider({
		autoHeight: true,
		arrowsNav: false,
		fadeinLoadedSlide: false,
		controlNavigationSpacing: 0,
		controlNavigation: 'tabs',
		imageScaleMode: 'none',
		imageAlignCenter:false,
		loop: false,
		loopRewind: true,
		numImagesToPreload: 6,
		keyboardNavEnabled: true,
		usePreloader: false
	});
	$('#video-gallery').royalSlider({
		arrowsNav: false,
		fadeinLoadedSlide: true,
		controlNavigationSpacing: 0,
		controlNavigation: 'thumbnails',
		thumbs: {
		  autoCenter: false,
		  fitInViewport: true,
		  orientation: 'vertical',
		  spacing: 0,
		  paddingBottom: 0
		},
		keyboardNavEnabled: true,
		imageScaleMode: 'fill',
		imageAlignCenter:true,
		slidesSpacing: 0,
		loop: false,
		loopRewind: true,
		numImagesToPreload: 3,
		video: {
		  autoHideArrows:true,
		  autoHideControlNav:false,
		  autoHideBlocks: true
		}, 
		autoScaleSlider: true, 
		autoScaleSliderWidth: 960,     
		autoScaleSliderHeight: 450,

		/* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
		imgWidth: 640,
		imgHeight: 360

	});
	$('#gallery-1').royalSlider({
		fullscreen: {
		  enabled: true,
		  nativeFS: true
		},
		controlNavigation: 'thumbnails',
		autoScaleSlider: true, 
		autoScaleSliderWidth: 960,     
		autoScaleSliderHeight: 850,
		loop: false,
		imageScaleMode: 'fit-if-smaller',
		navigateByClick: true,
		numImagesToPreload:2,
		arrowsNav:true,
		arrowsNavAutoHide: true,
		arrowsNavHideOnTouch: true,
		keyboardNavEnabled: true,
		fadeinLoadedSlide: true,
		globalCaption: true,
		globalCaptionInside: false,
		thumbs: {
		  appendSpan: true,
		  firstMargin: true,
		  paddingBottom: 4
		}
	});
	$("img.lazy").lazyload({
		load:function(){
			$(this.parentNode).nailthumb();
		}
	});
	//jQuery('.nailthumb-container').nailthumb();
});
</script>
<style>





 #gallery-1 {
  width: 100%;
  -webkit-user-select: none;
  -moz-user-select: none;  
  user-select: none;
}

#video-gallery {
  width: 100%;
}

.videoGallery .rsTmb {
  padding: 20px;
}
.videoGallery .rsThumbs .rsThumb {
  width: 220px;
  height: 80px;
  border-bottom: 1px solid #2E2E2E;
}
.videoGallery .rsThumbs {
  width: 220px;
  padding: 0;
}
.videoGallery .rsThumb:hover {
  background: #000;
}
.videoGallery .rsThumb.rsNavSelected {
  background-color: #02874A;
  border-bottom:-color #02874A;
}

.sampleBlock {
  left: 3%; 
  top: 1%; 
  width: 100%;
  max-width: 400px;
}

.rsVideoContainer {
width:100%; 
height:100%; 
overflow:hidden; 
display:block; 
float:left; 
}


@media screen and (min-width: 0px) and (max-width: 500px) {
  .videoGallery .rsTmb {
    padding: 6px 8px;
  }
  .videoGallery .rsTmb h5 {
    font-size: 12px;
    line-height: 17px;
  }
  .videoGallery .rsThumbs.rsThumbsVer {
    width: 100px;
    padding: 0;
  }
  .videoGallery .rsThumbs .rsThumb {
    width: 100px;
    height: 47px;
  }
  .videoGallery .rsTmb span {
    display: none;
  }
  .videoGallery .rsOverflow,
  .royalSlider.videoGallery {
    height: 300px !important;
  }
  .sampleBlock {
    font-size: 14px;
  }
}

.contentSlider {
  width: 100%;
}
.contentSlider,
.contentSlider .rsOverflow,
.contentSlider .rsSlide,
.contentSlider .rsVideoFrameHolder,
.contentSlider .rsThumbs {
  background: #eee;
  color: #000;
}

.contentSlider .rsSlide,
.contentSlider .rsOverflow {
  background: #eee;
}
.contentSlider h3 {
  font-size: 24px;
  line-height: 31px;
  margin: 12px 0 8px;
  font-weight: bold;
}
.contentSlider img {
  max-width: 100%;
  height: auto;
  display: block;
}
.content-slider-bg {
  width: 86%;
  padding: 24px 7%;
  background: #eee;
}

.nailthumb{position:relative}
.nailthumb .nailthumb-figure{position:relative;width:100%;padding-bottom:56%}
.nailthumb .nailthumb-figure .nailthumb-container{position:absolute;width:100%;height:100%;background:#fafafa url(../images/loading.gif) no-repeat center;overflow:hidden}
</style>
<div style="max-width:720px;position:relative;">


<div id="gallery-1" class="royalSlider rsDefault">
    <a class="rsImg bugaga" data-rsw="400" data-rsh="500"  data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/1.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/1.jpg">Vincent van Gogh - Still Life: Vase with Twelve Sunflowers<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/1.jpg" /></a>
    <a class="rsImg" data-rsw="632" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/2.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/2.jpg">Vincent van Gogh - The Starry Night<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/2.jpg" /></a>
    <a class="rsImg" data-rsw="336" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/3.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/3.jpg">Leonardo da Vinci - Mona Lisa<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/3.jpg" /></a>
    <a class="rsImg" data-rsw="417" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/4.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/4.jpg">Grant DeVolson Wood - American Gothic<img width="96" height="72" class="rsTmb" src="/plugins/royal-slider/img/paintings/t/4.jpg" /></a>
    <a class="rsImg" data-rsw="601" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/5.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/5.jpg">Rembrandt - The Night Watch<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/5.jpg" /></a>
    <a class="rsImg" data-rsw="350" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/6.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/6.jpg">Johannes Vermeer - Girl with a Pearl Earring<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/6.jpg" /></a>
    <a class="rsImg" data-rsw="596" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/7.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/7.jpg">Paul Cezanne - Card Players<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/7.jpg" /></a>
    <a class="rsImg" data-rsw="700" data-rsh="414" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/8.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/8.jpg">Ilya Repin - Reply of the Zaporozhian Cossacks<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/8.jpg" /></a>
    <a class="rsImg" data-rsw="470" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/9.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/9.jpg">Ivan Aivazovsky - Chesmabattle<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/9.jpg" /></a>
    <a class="rsImg" data-rsw="500" data-rsh="500" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/10.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/10.jpg">Gustav Klimt - The Kiss<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/10.jpg" /></a>
     <a class="rsImg" data-rsw="700" data-rsh="475" data-rsBigImg="http://dimsemenov.com/plugins/royal-slider/img/paintings/11.jpg" href="http://dimsemenov.com/plugins/royal-slider/img/paintings/700x500/11.jpg">Ivan Shishkin - Morning in a Pine Forest<img width="96" height="72" class="rsTmb" src="http://dimsemenov.com/plugins/royal-slider/img/paintings/t/11.jpg" /></a>
  </div>
  
<div id="video-gallery" class="royalSlider videoGallery rsDefault">
  <a class="rsImg" data-rsw="843" data-rsh="473" data-rsVideo="http://www.youtube.com/watch?v=HFbHRWwyihE" href="http://dimsemenov.com/plugins/royal-slider/img/admin-video.png">
    <div class="rsTmb">
      <h5>New RoyalSlider</h5>
      <span>by Dmitry Semenov</span>
    </div>
  </a>
   <a class="rsImg" data-rsVideo="https://vimeo.com/45830194" href="http://b.vimeocdn.com/ts/319/715/319715493_640.jpg">
    <div class="rsTmb">
      <h5>Stanley Piano</h5>
      <span>by Digital Kitchen</span>
    </div>
  </a>
  <div class="rsContent">
    <a class="rsImg" data-rsVideo="https://vimeo.com/31240369" href="http://b.vimeocdn.com/ts/210/393/210393954_640.jpg">
      <div class="rsTmb">
        <h5>I Believe I Can Fly</h5>
        <span>by sebastien montaz-rosset</span>
      </div>
    </a>
    <h3 class="rsABlock sampleBlock">Animated block, to show you that you can put anything you want inside each slide.</h3>
  </div>
   <a class="rsImg" data-rsVideo="https://vimeo.com/44878206" href="http://b.vimeocdn.com/ts/311/891/311891198_640.jpg">
    <div class="rsTmb">
      <h5>Dubstep Dispute</h5>
      <span>by Fluxel Media</span>
    </div>
  </a>
  <a class="rsImg" data-rsVideo="https://vimeo.com/45778774" href="http://b.vimeocdn.com/ts/318/502/318502540_640.jpg">
    <div class="rsTmb">
      <h5>The Epic & The Beasts</h5>
      <span>by Sebastian Linda</span>
    </div>
  </a>
   <a class="rsImg" data-rsVideo="https://vimeo.com/41132461" href="http://b.vimeocdn.com/ts/284/709/284709146_640.jpg">
    <div class="rsTmb">
      <h5>Barcode Band</h5>
      <span>by Kang woon Jin</span>
    </div>
  </a>
 <a class="rsImg" data-rsVideo="hhttps://vimeo.com/44388232" href="http://b.vimeocdn.com/ts/308/375/308375094_640.jpg">
    <div class="rsTmb">
      <h5>Samm Hodges Reel</h5>
      <span>by Animal</span>
    </div>
  </a>
  <a class="rsImg" data-rsVideo="http://www.youtube.com/watch?v=VDspPKDMBMo" href="/plugins/royal-slider/img/video/02.jpg">
    <div class="rsTmb">
      <h5>The Foundry Showreel</h5>
      <span>by The Foundry</span>
    </div>
  </a>
</div>

<div id="content-slider-1" class="royalSlider contentSlider rsDefault">
  <div>
    <h3>Slide HTML Text</h3>
    <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.  These words are here to provide the reader with a basic impression of how actual text will appear in its final presentation. </p>
    <blockquote>This is dummy copy. It's Greek to you. Unless, of course, you're Greek, in which case, it really makes no sense. Why, you can't even read it!  It is strictly for mock-ups. You may mock it up as strictly as you wish.</blockquote>
    <p>After all, you have many other things you should be doing. Who's paying you to waste this time, anyway?</p>
    <span class="rsTmb">HTML text</span>
  </div>
  <div>
    <img class="rsImg" src="http://dimsemenov.com/plugins/royal-slider/img/home.jpg" data-rsw="707" data-rsh="397" />
    <h3>Slide with Image and Text</h3>
    <p>This is dummy copy. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. If this were real copy, it would have ended long ago. But then, this is dummy copy. It is not meant to be read. Period.</p>
    <span class="rsTmb">Image</span>
  </div>
  <div>
    <img class="rsImg" src="http://dimsemenov.com/plugins/royal-slider/img/boat.jpg" data-rsVideo="http://www.youtube.com/watch?v=HFbHRWwyihE" data-rsw="640" data-rsh="425" />
    <h3>Slide with Video and Text</h3>
    <p>This is dummy copy. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy copy. It is not meant to be read. Period.</p>
    <span class="rsTmb">Video</span>
  </div>
</div>

</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img class="lazy" data-original="http://inspirationaldaily.files.wordpress.com/2012/05/love-inspirational-daily.jpeg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://www.robertscentre.com/wp-content/themes/Roberts-Centre/images/roberts-centre-banner.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://www.momendeavors.com/wp-content/uploads/2013/01/vertical-wooden-blocks-546x1024.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://stylonica.com/wp-content/uploads/2013/11/sad-love-pictures-of-591346.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://coverphotofacebook.info/uploads/posts/2013-03/135-sad-love-quotes.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://www.wallsave.com/wallpapers/2560x1600/sad-love/1819678/sad-love-free-for-pc-1819678.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://4.bp.blogspot.com/--_i95FwcBVs/UfzNQqokmuI/AAAAAAAAAqY/hGMjJgwM9OQ/s1600/sad-love-alone-miss-u-love-u-quotes-wallpapers-22.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://tieudaocam.files.wordpress.com/2012/08/draw-game-happy-heart-love-sad-favim-com-50316.jpg"/>
		</div>
	</div>
</div>

<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://1.bp.blogspot.com/-H6tMTKql4-c/T3F_ExK7AJI/AAAAAAAABzg/KdM31Z9tlDM/s400/Sad+Love+Friendship+Quotes.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://www.inspirational-friendship-poems.com/images/break-up-sad-love-poems.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://3.bp.blogspot.com/-ZAdtdbL0jWA/T5E9EeFVu_I/AAAAAAAAAB8/Ndb0fOj_sMM/s1600/Sad-Love-Wallpapers-Free.jpg"/>
		</div>
	</div>
</div>
<div class="nailthumb">
	<div class="nailthumb-figure">
		<div class="nailthumb-container" >
			<img  class="lazy" data-original="http://www.wallsave.com/wallpapers/1024x768/sad-love/210314/sad-love-sweet-quotes-210314.jpg"/>
		</div>
	</div>
</div>

